import React, { Component } from 'react'
// 非受控组件
// 重点使用ref  ---  根本就是DOM操作
//    1.ref的属性值为字符串，类似vue --- 严格模式下爆出了警告信息
//    2.类组件使用 createRef 以及 函数式组件使用  useRef
export default class App extends Component {
  usernameRef = React.createRef()
  passwordRef = React.createRef()
  fileRef = React.createRef()
  imgRef = React.createRef()
  render() {
    return (
      <div>
        <div>
          用户名：<input ref={ this.usernameRef } type="text" placeholder="用户名"/>
        </div>
        <div>
          密码： <input ref={ this.passwordRef } type="password" placeholder="密码"/>
        </div>
        <div>
          上传 <input ref={ this.fileRef } onChange = { () => {
            // 获取到的数据 都被压入到了一个数组中
            const file = this.fileRef.current.files[0]
            // 获取H5新增的文件Api
            const reader = new FileReader()
            // 将文件转换为 base64地址
            reader.readAsDataURL(file)
            // 等到加载完毕
            const that = this
            reader.onload = function () {
              // this.result其实就是base64地址
              that.imgRef.current.src = this.result  
              // 必要时可以修改状态
            }
          }} type="file"/>
        </div>
        <div>
          预览 <img ref={ this.imgRef } src="" alt=""/>
        </div>
        <button onClick = { () => {
          console.log({
            username: this.usernameRef.current.value,
            passwordRef: this.passwordRef.current.value,
          })
          
        } }>获取数据</button>
      </div>
    )
  }
}
